<template>
    <div class="container">
        <div class="heade">
            <div class="header">
                <span class="text">基本信息</span>
            </div>
            <div class="heade-text">
                <el-form ref="form" :model="form" label-width="80px" class="heade-form">
                    <el-form-item label="客户名称">
                        <el-select v-model="form.custom_name" placeholder="请选择客户名称" style="width: 160px;">
                            <el-option label="客户A" value="客户A"></el-option>
                            <el-option label="客户B" value="客户B"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收款方式">
                        <el-select v-model="form.pay" placeholder="请选择收款方式" style="width: 160px;">
                            <el-option label="微信" value="微信"></el-option>
                            <el-option label="支付宝" value="支付宝"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="业务员">
                        <el-select v-model="form.employee" placeholder="请选择业务员" style="width: 160px;">
                            <el-option label="A员工" value="A员工"></el-option>
                            <el-option label="B员工" value="B员工"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="配送员">
                        <el-select v-model="form.deliver" placeholder="请选择配送员" style="width: 160px;">
                            <el-option label="A员工" value="A员工"></el-option>
                            <el-option label="B员工" value="B员工"></el-option>
                            <el-option label="C员工" value="C员工"></el-option>
                            <el-option label="D员工" value="D员工"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="出货仓库">
                        <el-select v-model="form.stock" placeholder="请选择出货仓库" style="width: 160px;">
                            <el-option label="A仓库" value="A仓库"></el-option>
                            <el-option label="B仓库" value="B仓库"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="between">
            <div class="header">
                <span class="text">选择商品</span>
            </div>
            <div class="heade-text">
                <el-form ref="form" :model="form2" label-width="80px" class="heade-select">
                    <el-form-item label="选择品牌">
                        <el-select v-model="form2.goods" placeholder="请选择品牌" style="width: 160px;">
                            <el-option label="伊利" value="伊利"></el-option>
                            <el-option label="蒙牛" value="蒙牛"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择分类">
                        <el-select v-model="form2.type" placeholder="请选择分类" style="width: 160px;">
                            <el-option label="预付款" value="预付款"></el-option>
                            <el-option label="货到付款" value="货到付款"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品标题" >
                        <el-input v-model="form2.title" style="width: 160px;"></el-input>
                    </el-form-item>
                    <el-form-item>   
                        <el-button>搜索</el-button>
                    </el-form-item>
                </el-form>
                <div class="result">
                    <div class="header">
                    <span class="text">搜索结果</span>
                </div>
                <div class="between-table">
                    <el-table
                        :header-cell-style="{fontSize: '14px',textAlign: 'center'}" 
                        :cell-style="{fontSize: '12px',textAlign: 'center'}"
                        ref="multipleTable"
                        :data="tableData"
                        border
                        tooltip-effect="dark"
                        style="width: 100%"
                        @selection-change="handleSelectionChange">
                        <el-table-column label="商品名称"width="160">
                            <template slot-scope="scope">{{ scope.row.name}}</template>
                        </el-table-column>
                        <el-table-column prop="big_unit" label="大单位" width="160"></el-table-column>
                        <el-table-column prop="big_price" label="大单位单价"></el-table-column>
                        <el-table-column prop="min_unit" label="小单位"></el-table-column>
                        <el-table-column prop="min_price" label="小单位价格" width="160"></el-table-column>
                        <el-table-column prop="have" label="现有库存"></el-table-column>
                        <el-table-column prop="option" label="操作"><span class="column">添加</span></el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage3"
                        :page-size="100"
                        layout="prev, pager, next, jumper"
                        :total="1000">
                        </el-pagination>
                    </div>
                </div>
            </div>   
        </div> 
        <div class="end" >
            <div class="header">
                <span class="text">商品明细</span>
            </div>
            <div class="between-table">
                <el-table
                    :header-cell-style="{fontSize: '14px',textAlign: 'center'}" 
                    :cell-style="{fontSize: '12px',textAlign: 'center'}"
                    :row-class-name="'fixed-row-height'"
                    ref="multipleTable"
                    :data="tableDatae"
                    border
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                    <el-table-column label="商品名称">
                        <template slot-scope="scope">{{ scope.row.name }}</template>
                    </el-table-column>
                    <el-table-column prop="big_unit_price" label="单位/大单位" width="140"></el-table-column>
                    <el-table-column label="数量" width="160" align="center">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.num1" :min="1" :max="9999" size="small"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="min_unit_price" label="小单位/价格" width="140"></el-table-column>
                    <el-table-column label="数量" width="160" align="center">
                        <template slot-scope="scope">
                            <el-input-number v-model="scope.row.num2" :min="1" :max="9999" size="small"></el-input-number>
                        </template>
                    </el-table-column>
                    <el-table-column prop="sum" label="金额"></el-table-column>
                    <el-table-column label="生产日期" width="160">
                        <template slot-scope="scope">
                            <el-date-picker
                                align="center"
                                size="small"
                                style="width:130px"
                                v-model="scope.row.date"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="option" label="操作"><span class="column">删除</span></el-table-column>
                </el-table>
            </div>
            <div style="border: 0 solid rgba(228, 228, 228, 1); border-width: 0 1px 1px 1px ">
                <span>商品共：</span>
                <span>9</span>
                <span>金额合计：</span>
                <span>9999.00元</span>
                <el-button type="success" style="margin: 20px; position: relative; left:600px;">提交</el-button>
            </div>
        </div>    
        <div class="footer">
            <div class="header">
                <span class="text">付款信息</span>
            </div>
            <div class="heade-text">
                <el-form ref="form" :model="form3" label-width="80px" class="heade-form">
                    <el-form-item label="付款类型" class="head-br">
                        <el-select v-model="form3.pay_type" placeholder="请选择支付类型" style="width: 160px;">
                            <el-option label="现金" value="现金"></el-option>
                            <el-option label="支付宝" value="支付宝"></el-option>
                            <el-option label="微信" value="微信"></el-option>
                        </el-select>
                    </el-form-item> 
                    <el-form-item label="优惠金额" class="head-br">
                        <el-select v-model="form3.pay" placeholder="请选择优惠金额" style="width: 160px;">
                            <el-option label="A" value="A"></el-option>
                            <el-option label="B" value="B"></el-option>
                        </el-select>
                    </el-form-item>
                    <sapn style=" position: relative; top: 8px; font-size: 14px; left: 10px;">应付款金额：</sapn>
                    <span style=" position: relative; top: 8px; font-size: 14px; left: 10px;">9999.99</span>
                    <el-button type="success" style="margin: 20px; position: relative; top:-18px; left: 300px;">提交</el-button>
                </el-form>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
export default{
    data() {
      return {
        form: {
          custom_name: '',
          pay:'',
          employee:'',
          deliver:'',
          stock:'',
        },
        form2: {
          goods:'',
          title:'',
          type:'',
        },
        form3: {
          pay_type:'',
          pay:'',
        },
        tableData: [
            {
            name: '商品名称',
            big_unit: '箱',
            big_price: '100',
            min_unit: '瓶',
            min_price: '10',
            have: '999箱',
            }, 
            {
            name: '商品名称',
            big_unit: '箱',
            big_price: '100',
            min_unit: '瓶',
            min_price: '10',
            have: '999箱',
            }, 
            {
            name: '商品名称',
            big_unit: '箱',
            big_price: '100',
            min_unit: '瓶',
            min_price: '10',
            have: '999箱',
            }, 
            {
            name: '商品名称',
            big_unit: '箱',
            big_price: '100',
            min_unit: '瓶',
            min_price: '10',
            have: '999箱',
            }, 
            {
            name: '商品名称',
            big_unit: '箱',
            big_price: '100',
            min_unit: '瓶',
            min_price: '10',
            have: '999箱',
            }
        ],
        tableDatae: [
            {
            name: '商品名称',
            big_unit_price: '100.00/箱',
            num1: 9,
            min_unit_price: '10.00瓶',
            num2: 9,
            sum: '990.99',
            date:'',
            }, 
            {
            name: '商品名称',
            big_unit_price: '100.00/箱',
            num1: 9,
            min_unit_price: '10.00瓶',
            num2: 9,
            sum: '990.99',
            date:'',
            }, 
            {
            name: '商品名称',
            big_unit_price: '100.00/箱',
            num1: 9,
            min_unit_price: '10.00瓶',
            num2: 9,
            sum: '990.99',
            date:'',
            }, 
            {
            name: '商品名称',
            big_unit_price: '100.00/箱',
            num1: 9,
            min_unit_price: '10.00瓶',
            num2: 9,
            sum: '990.99',
            date:'',
            }, 
        ],
        multipleSelection: [],
      }
    },   
     methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}

</script>

<style scoped>
.heade-text{
    border: 1px solid rgba(228, 228, 228, 1);
    tex-align: center;
}
.heade-form{
    display:flex;
     flex-wrap: wrap;
    position: relative;
    top: 12px;
}
.heade-select{
    display:flex;
    position: relative;
    top: 25px;
}
.head-br{
    display: block;
}
.text{
    font-size: 14px;
    position: absolute;
    left: 12px;
}
.info1{
    font-size: 14px;
    position: absolute;
    right: 70px;
    top: 14px;
}
.info{
    font-size: 14px;
    position: absolute;
    right: 12px;
    top: 14px;
}
.header{
    position: relative;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: rgba(243, 243, 243, 1);
    border: 1px solid rgba(228, 228, 228, 1);
}
.between .header{
    margin-top: 20px;
}
.column{
    font-size: 14px;
    margin-right: 5px;
}
.result{
    padding: 15px;
}
.end span{
    font-size: 14px;
    margin: 10px;
}
.fixed-row-height {
  height: 50px;
}
</style>